<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
     <meta charset="utf-8">
	<head>
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
		<link href="css/animate.css" rel="stylesheet">
		<script src='bootstrap/js/jquery.js'></script>
		<script src='bootstrap/js/bootstrap.js'></script>
		<script src='bootstrap/js/blockUI.js'></script>
		<script src='bootstrap/js/wow.min.js'></script>
		<title>Memory accueil</title>
		<style type="text/css">


		.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.flip-container, .flip-front, .flip-back {
     height: 100%;
    position: absolute;
    width: 100%;
}

.flipper {
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;

    position: relative;
}

.flip-front, .flip-back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;


    position: absolute;
    top: 0;
    left: 0;
}

.flip-back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-container.hover .flip-back, .flip-container.hover .flip-back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container.hover .flip-front, .flip-container.hover .flip-front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}


.flip-front {
    z-index: 2;
}
		</style>
	</head>
	<!--<body style="background-image: url('img/fond_accueil.png'); background-size:100%;height:100%;width:100%;overflow:hidden">-->
	<body style="background-image: url('img/fond_clair.jpg'); background-size:100%;height:100%;width:100%;overflow:hidden">
		<div id="JEU" style="height:100%">
			<div class="row-fluid" style="height:100%; >
				<div class="span9">
					<div class="row-fluid wow bounceInUp" style="padding:5%;height:100%;">
						<!-- ZONE DE JEU -->
						<div class="row-fluid">
						<div class="span2"></div>
							<div class="span1 card flip-container" ligne="1" colonne="1" found="false"  style="position:relative;border:1px solid black; overflow:hidden">
								<div class="flipper">
									<div class="flip-front">
										<img src="img/LettreJ.png" />
									</div>
									<div class="flip-back" >
										<img src="img/LettreM.png" />
									</div>
								</div>
							</div>
							<div class="span1 card flip-container" ligne="1" colonne="2" found="false" style="position:relative;border:1px solid black; overflow:hidden">
								<div class="flipper">
									<div class="flip-front">
										<img src="img/LettreO.png" />
									</div>
									<div class="flip-back" >
										<img src="img/LettreE.png" />
									</div>
								</div>
							</div>
							<div class="span1 card flip-container" ligne="1" colonne="3"  found="false" style="position:relative;border:1px solid black; overflow:hidden">
								<div class="flipper">
									<div class="flip-front">
										<img src="img/LettreU.png" />
									</div>
									<div class="flip-back" >
										<img src="img/LettreM.png" />
									</div>
								</div>
							</div>
							<div class="span1 card flip-container"  ligne="1" colonne="4" found="false" style="position:relative;border:1px solid black; overflow:hidden">
								<div class="flipper">
									<div class="flip-front">
										<img src="img/LettreE.png" />
									</div>
									<div class="flip-back" >
										<img src="img/LettreO.png" />
									</div>
								</div>
							</div>
							<div class="span1 card flip-container" ligne="1" colonne="5" found="false" style="position:relative;border:1px solid black; overflow:hidden">
								<div class="flipper">
									<div class="flip-front">
										<img src="img/LettreR.png" />
									</div>
									<div class="flip-back" >
										<img src="img/LettreR.png" />
									</div>
								</div>
							</div>
							<div class="span1 card flip-container" ligne="1" colonne="6" found="false" style="position:relative;border:1px solid black; overflow:hidden">
								<div class="flipper">
									<div class="flip-front">
										<img src="img/Lettre_p.png" />
									</div>
									<div class="flip-back" >
										<img src="img/LettreY.png" />
									</div>
								</div>
							</div>
							
						</div>
					</div>
				</div>
				<script>
				$(function() {
				new WOW().init();
				var compt = 1;
				  $(".card").height($(".card").width());// Mise en forme des cartes (largeur = longueur)
				  $(".card").mouseover(function(){
					$(".card").removeClass('hover');
					setInterval(function(){
						$(".card").each(function() {
							var obj = this;
							console.debug(obj);
							compt ++;
							setInterval(function(){$(obj).addClass('hover');}, compt*500);
						});
					}, 2000);
				});
				});
				
				</script>
				
			</div>
		</div>
		<div style="text-align:center;"> <h1>Avez-vous une mémoire d'éléphant ou de poisson?</h1> </div>
		 <div class="row-fluid"  >
			<div class="span2"></div>
			<div class="span3">
			<img src="img/Dumbo-HQ.png" /></div>
			<div class="span2" style="font-size:30px; vertical-align: middle;padding-top:10%; text-align:center; font:Helvetica;"><b>VS</b></div>
			<div class="span3">
			<img src="img/Dory-FN.png" /></div>
			<div class="span2"></div>
		</div> <center><button id="accueilStart" class="btn btn-success btn-large">  Start </button></center>
		
		
		<!--Bouton Like -->
		<div id="fb-root"></div>
		<script>(function(d, s, id) {
			var js, fjs = d.getElementsByTagName(s)[0];
			if (d.getElementById(id)) return;
			js = d.createElement(s); js.id = id;
			js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.0";
			fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>


		<!-- Placez cette balise où vous souhaitez faire apparaître le gadget Bouton +1. -->
		<div class="g-plusone" data-annotation="inline" data-width="300"></div>

		<!-- Placez cette ballise après la dernière balise Bouton +1. -->
		<script type="text/javascript">
		window.___gcfg = {lang: 'fr'};

		(function() {
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			po.src = 'https://apis.google.com/js/platform.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		})();
		</script>


		<!--Bouton Like -->
		<div class="fb-like" data-href="http://memoryapp4.olympe.in/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

		
	</body>
</html>

		
